import Button from 'bee-button';
import 'bee-button/build/Button.css';

import Select from 'bee-select';
import 'bee-select/build/Select.css';

import Dropdown from 'bee-dropdown';
import 'bee-dropdown/build/Dropdown.css';

import { Icon, Pagination, Checkbox, Popconfirm, FormControl , ButtonGroup, Menu } from 'tinper-bee';

import "./index.less";
import refresh from "./../../../assets/image/refresh.png";
import {buttonClick, onChange, linkTo, queryOrgList, queryCard} from "./index.js";
import CommonTreeReferStruc from "./../../../components/ReferTreeStruc";
import { vendorsFmtDate, vendorsDanger as danger, vendorsSetDateLoop } from './../../../utils/config.js';
import CommonModal from './../../../components/CommonModal/index.jsx';

export const  RenderHtml = {
    headerButton : function (buttons = []) {
        let _this = this

        return (
            buttons.map((itemButtom)=>{
                if(itemButtom.buttonGroup){
                    return(
                        <ButtonGroup>
                           {
                              itemButtom.buttonGroup.map((itemButtonGroup)=>{
                                return(
                                    <Button  
                                        colors={ itemButtonGroup.primary ? "primary":''} 
                                        onClick = {()=>buttonClick.call(this, Object.keys(itemButtonGroup)[0])}
                                        className ={Object.values(itemButtonGroup)[0]=== ''? 'u-button-refresh' : 'u-button--group'}
                                        style={{
                                            background: !itemButtonGroup.primary ? "#fff":'',
                                            color: itemButtonGroup.primary ? '#fff' : '#212121'
                                        }}
                                        id = {Object.keys(itemButtonGroup)[0]}
                                        disabled = {itemButtonGroup.disabled}
                                    >
                                        {
                                            Object.values(itemButtonGroup)[0]? 
                                                Object.values(itemButtonGroup)[0]
                                                :
                                                <img src={refresh}/>
                                        }
                                    </Button>
                                )   
                              }) 
                           }
                        </ButtonGroup>
                    )
                }else if(itemButtom.dropdown){
                    return(
                        <Dropdown 
                            trigger={['hover']}
                            overlay={(
                                <Menu >
                                        {itemButtom.dropdown.dropdownSelect.map((itemDropdownSelect)=>{
                                            return(
                                                <Menu.Item 
                                                    disabled = {itemDropdownSelect.disabled}
                                                    key={Object.keys(itemButtom)[0]}
                                                    onClick={()=>buttonClick.call(this,Object.keys(itemDropdownSelect)[0])}
                                                    id = {Object.keys(itemButtom)[0]}
                                                >
                                                    {Object.values(itemDropdownSelect)[0]}
                                                </Menu.Item>
                                            )
                                        })}
                                </Menu> 
                            )}
                            animation="slide-up"
                            style={{display:'flex'}}
                            
                        >
                           <Button  
                                colors={ itemButtom.dropdown.primary ? "primary":''} 
                                //bordered = {itemDropdown.primary ? false : true}
                                onClick = {()=>buttonClick.call(this,Object.keys(itemButtom.dropdown)[0])}
                                className ={Object.values(itemButtom.dropdown)[0]=== ''? 'u-button-refresh' : 'u-button--group'}
                                style={{
                                    background: !itemButtom.dropdown.primary ? "#fff":'',
                                    color: itemButtom.dropdown.primary ? '#fff' : '#212121'
                                }}
                                id = {Object.keys(itemButtom)[0]}
                                disabled = {itemButtom.dropdown.disabled}
                            >
                                {
                                    Object.values(itemButtom.dropdown)[0]? 
                                        Object.values(itemButtom.dropdown)[0]
                                        :
                                        <img src={refresh}/>
                                }
                                <Icon type="uf-anglearrowdown" />
                            </Button>
                        </Dropdown >
                    )
                } else if(itemButtom.refer){
                    
                    return(
                        <CommonTreeReferStruc
                            referType={"tree"}
                            entryComponent = {
                                <Button  
                                    style={{
                                        background: !itemButtom.primary ? "#fff":'',
                                        color: itemButtom.primary ? '#fff' : '#212121'
                                    }}
                                >
                                    {Object.values(itemButtom)[0]? 
                                        Object.values(itemButtom)[0]
                                        :
                                        <img src={refresh}/> } 
                                </Button>
                            }
                            data={this.state.orgData}
                            selectedKeysId={this.state.checkedKeysId}
                            selectedKeysName={this.state.checkedKeys}
                            handleSelectedKeys={(data) => {
                                console.log("点击确定后的数据", data)
                                onChange.call(this, {
                                    checkedKeys: data.title,
                                    checkedKeysId: data.id
                                })
                            }}
                            isShowSearchArea={false}
                            title={'组织列表'}
                            getData={queryOrgList.bind(this) }
                            sname={"sname"}
                            scode={"scode"}
                            pk={"pkOrganization"}
                            children={"children"}
                           
                        /> 
                    )
                }else{
                    return(
                        <Button  
                            colors={ itemButtom.primary ? "primary":''} 
                            bordered = {itemButtom.primary ? false : true}
                            onClick = {()=>buttonClick.call(this,Object.keys(itemButtom)[0])}
                            className ={Object.values(itemButtom)[0]=== ''? 'u-button-refresh' : 'u-button'}
                            style={{
                                background: !itemButtom.primary ? "#fff":'',
                                color: itemButtom.primary ? '#fff' : '#212121'
                            }}
                            id = {Object.keys(itemButtom)[0]}
                            disabled = {itemButtom.disabled}
                        >
                           {Object.values(itemButtom)[0]? 
                            Object.values(itemButtom)[0]
                            :
                            <img src={refresh}/> } 
                        </Button>
                    )   
                }
            })
        )
    },
    operationHtml : function (text, record, index, buttons=[]){
        return(
            <div className = {'operation'}>
                {buttons.map((itemButtom)=>{
                    if(!itemButtom.popConfirm){
                        return(
                            <span 
                                className={'operation-edit'} 
                                onClick={()=>buttonClick.call(this, Object.keys(itemButtom)[0], record, index)}
                                id = {Object.keys(itemButtom)[0]}
                            >
                                {Object.values(itemButtom)[0]}
                            </span>
                        )
                    }else{
                        return(
                            <Popconfirm 
                                trigger="click" 
                                placement="top" 
                                content={'确定要删除吗？'}
                                onClose = {()=>buttonClick.call(this, Object.keys(itemButtom)[0], record, index)}
                            >
                                <div>
                                    {Object.values(itemButtom)[0]}
                                </div>
                            </Popconfirm>
                        )
                    }
                            
                })}
            </div>
        )
    },
    headerForm : function(item = {}) {
        switch(item.type){
            case "refer":return(
                <CommonTreeReferStruc
                    referType={item.referType}
                    data={item.data}
                    selectedKeysId={item.selectedKeysId}
                    selectedKeysName={item.selectedKeysName}
                    handleSelectedKeys={(data) => {
                        console.log("点击确定后的数据", data)
                        onChange.call(this, {
                            [item.attrcode]: data.title,
                            [item.attrcodeId]: data.id
                        })
                    }}
                    isShowSearchArea={false}
                    title={item.placeholder}
                    getData={item.ajaxReq}
                    sname={"sname"}
                    scode={"scode"}
                    pk={"pkOrganization"}
                    children={"children"}
                    style={{
                        width:250,
                        padding:2
                    }}
                />
            )
            case "enum":return(
                <Select
                    placeholder={item.placeholder}
                    disabled={item.disabled}
                    multiple = {item.multiple}
                    showSearch = {true}
                    allowClear={true}
                    className={'u-select-selection'}
                    style={{
                        width:250,
                        padding:2
                    }}
                    onChange = {(value)=> onChange.call(this, {[item.attrcode]: value})}
                    value = {item.selectedKeysName}
                    maxTagCount = {2}
                >
                    {this.state.ruleData.map((item)=>{
                        return(
                            <Select.Option key ={item.key}>
                                {item.value}
                            </Select.Option>
                        )
                    })}
                </Select>
            )
            case "input" :return(
                <FormControl
                    disabled={item.disabled}
                    style={{
                        width:250,
                        padding:2
                    }}
                    onChange = {(value)=> onChange.call(this, {[item.attrcode]: value})}
                    value = {item.selectedKeysName}
                />
            )
            case "number" :return(
                <FormControl
                    disabled={item.disabled}
                    style={{
                        width:250,
                        padding:2
                    }}
    
                    onChange = {(e)=> {
                        let _this = this;
                        let value = '';
                        if(e && e.target && e.target.value){
                            let exp = new RegExp(/^(\d)*$/, "g");
                            let flag = exp.test(e.target.value);
                            
                            if(!flag){
                                danger({'text':"请输入正整数"})
                                value = _this.state[item.attrcode]
                            }else{
                                value = e.target.value
                            }
                        }
                        onChange.call(_this, {[item.attrcode]: value})
                    }}
                    value = {item.selectedKeysName}
                />
            )
            case "button": return(
                <div className ={'search-button'}>
                    <Button colors="primary" onClick={()=>buttonClick.call(this,'Search')}  disabled={item.disabled}>查询</Button>
                    <Button bordered onClick={()=>buttonClick.call(this,'Clear')}  disabled={item.disabled}>清空</Button>
                </div>)
        }
    },
    fromControlBrowse : function(item = {}){
        return(
            <div 
                style={{
                    width:250,
                    padding:2
                }}
            >
                ：{item.value}
            </div>
        )
    },
    cancelOfModal :function () {
        let {
            cancelModal,
            buttonIdCur
        } = this.state;
     
        return (
            <CommonModal 
                show={cancelModal}
                cancel={cancelOfModalClick.bind(this)}
                confirm={confirmOfModalClick.bind(this)}
                content={buttonIdCur === "Add"? '是否清除当前编辑数据？':'是否清除数据并退出当前编辑页面？'}
                backdrop={true}
                onClose = {cancelOfModalClick.bind(this)}
                className = {"cancel-modal"}
            >
            </CommonModal>
        )
    }
}



export function cancelOfModalClick(){
    this.setState({
        cancelModal : false,
    })
}

export function confirmOfModalClick(){
 
    let {
        buttonIdCur,
        status,
        tableData,
        pk,
        selectedTableData
    } = this.state;
    if(buttonIdCur === 'Cancel'){
        this.props.form.clearFormValue()
        tableData = this.state.initData.tableData;
        if(status === "edit" && pk){
            queryCard.call(this, {pkEnterprise : pk});
        }else{
            this.setState({
                tableData,
            })
        }
        
        this.state.columns.splice(this.state.columns.length-1, 1);
        this.props.form.setFormStatus("browse")
       
        this.setState({
            status :'browse',
            columns: this.state.columns,
          //  tableData,
        }, ()=>{
            this.props.button.setButtonState(this.state.status);
            if(!pk){//浏览态无主键
                this.props.button.setButtonDisable(["Edit","Delete","Empower","UnEmpower","refresh" ], true)
            }else{
                if(!selectedTableData.length){
                    this.props.button.setButtonDisable(["Empower","UnEmpower" ], true)
                }else{
                    this.props.button.setButtonDisable(["Empower","UnEmpower" ], false)
                }
            }
        })
    }else if(buttonIdCur === 'Back'){
        linkTo.call(this, "/list") 
    }
    
}
